<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            {{ foo.bar.pie.name}}
            <h3>{{count}}</h3>
            <h2>{{msg}}</h2>
            <h1>{{obj.a}}</h1>
            <div v-text="msg"></div>
            <input type="text" v-model="count"/>
        </div>

        <script src="./05-myjs/Dep.js"></script>
        <script src="./05-myjs/Watcher.js"></script>
        <script src="./05-myjs/Observer.js"></script>
        <script src="./05-myjs/vue.js"></script>
        <script src="./05-myjs/compiler.js"></script>
        <script>
            let vm = new Vue({
                el: '#app',
                data: {
                    count: 1,
                    msg: 'hello',
                    foo: {
                        bar: {
                            pie: {
                                name: 'circle'
                            }
                        }
                    },
                    obj: {}
                }
            })
            // console.log(vm);
        </script>
    </body>
</html>
